<template>
	<view class="classifyLayout pageBg">
		<custom-nav-bar title="出行广场"></custom-nav-bar>
		
		<view class="travel-classify">
			<travel-item v-for="item in classifyTripList" :key="item._id" :item="item"></travel-item>
		</view>
		<float></float>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onReachBottom} from "@dcloudio/uni-app"


const selectPublishType = ref(0);	//  默认是人找车
const selectTripType = ref(0);		// 默认是早上出发
const classifyTripList = ref([]);
const noNewData = ref(false); 
	
const db = uniCloud.database();

const queryParams = ref({
	pageNum: 1,
	pageSize: 10
})


// 获取分类的行程数据
const getClassifyData = async function(){
	let current = queryParams.value.pageSize * (queryParams.value.pageNum - 1);
	let res = await db.collection('trip').where({
		publishType: selectPublishType.value,
		tripType: selectTripType.value
	})
	.orderBy("createTs desc")
	.skip(current)
	.limit(queryParams.value.pageSize)
	.get();
	console.log(res);
	if(res.result.errCode === 0){
		classifyTripList.value = [...classifyTripList.value, ...res.result.data];
		if(queryParams.value.pageSize > res.result.data.length){
			noNewData.value = true;
		}		
	}else{
		uni.showToast({
			title: "返回有误，请稍后重试"
		})
	}
	 
}

// 触底加载更多
onReachBottom(()=>{
	if(noNewData.value){
		// 如果上一次加载的数据少于pageSize，本次将不会继续加载；
		return;
	}
	queryParams.value.pageNum++;
	getClassifyData(); 
	console.log(classifyTripList.value);
	
})

getClassifyData();

</script>

<style lang="scss" scoped>
.classifyLayout{
	.travel-classify{
		margin-top: 30rpx;
		padding: 0 30rpx;
		display: grid;		// 网格布局
		gap: 30rpx;
		grid-template-columns: repeat(1, 1fr);
	}
}	

</style>
